<template>
    <div class="screen-nav">
        <div class="nav-item" :class="{active:navItem.id == navCurrentId}" v-for="navItem in navList" :key="navItem.id" @click="getTopic(navItem.id)">
            <span v-text="navItem.topic"></span>
        </div>
    </div>
</template>
<script>
import api from '@/utils/api';
import { mapGetters } from 'vuex'
// 事件
import delegate from '../js/event.js'

export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters(['navList','navCurrentId'])
    },
    created() {
        // 左侧主题领域列表
        this.getNav();
    },
    methods: {
        getNav(){
            this.$store.dispatch('getNav').then(()=>{
                this.$router.replace('/screen/technology'); 
            })
        },
        getTopic(topicId){
            this.$store.commit('SET_CURRENT',topicId);
            delegate.$emit('s-resize');
        }
    },
}
</script>
<style lang="scss">
    .screen-nav{
        display: flex;
        flex-direction: column;
        background: linear-gradient(90deg,#053393,#055793);
        .nav-item{
            position: relative;
            display: flex;
            align-items: center;
            flex: 0 0 40px;
            justify-content: center;
            cursor: pointer;
            span{
                font-size: 15px;
                color: #fff;
            }
            &.active{
                background-color: #0066ff;
            }
            &::after{
                position: absolute;
                content: '';
                bottom: 0;
                left: 0;
                right: 0;
                border-bottom: 1px solid #213391;
            }
        }
    }
</style>
